<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <!--引入vuejs-->
  <script src="https://unpkg.com/vue@2.6/dist/vue.min.js"></script>
  <!-- 引入样式 -->
  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
   <!-- 引入组件库 -->
  <script src="https://unpkg.com/element-ui/lib/index.js"></script>
  <link href="//unpkg.com/layui@2.8.6/dist/css/layui.css" rel="stylesheet">
  <link href="//unpkg.com/layui@2.8.8/dist/css/layui.css" rel="stylesheet">
    <link rel="stylesheet" href="../layui/css/layui.css">
    <link rel="stylesheet" href="../css/global.css">
    <link rel="stylesheet" href="../css/admin.css">
    <script src="../layui/layui.js"></script>
  <title>猫尔顿国际酒店</title>
  <style>
    *{
        padding: 0px;
        margin: 0px;
      }

 #nav {
  background-color: #ddd;
  height: 60px;
  position: relative;
}
#nav ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  position: absolute;
  top: 0;
  right: 0;
}

#nav ul li {
  
  display: inline-block;
}

#nav ul li a {
   text-align: center;
  line-height: 60px;
  padding: 10px 20px;
  text-decoration: none;
  color: #333;

}

#nav ul li a:hover {
  background-color: #fd9090;
}

 /**
 导航栏结束
 */
  </style>
     
</head>
<body>
     <div>
         <div id="nav">
          <ul>
            <li><a href="#">免费订房热线 400-820-0500</a></li>
            <li><a href="#">会员独享</a></li>
            <li><a href="#"><img src="images/hotelym/new-header-wifi.png">免费wif<samp></samp></a></li>
            <li><a lay-on="test-page-custom">会员登入</a></li>
            <li><a href="user/adduser.html">免费加入</a></li>
            <li><a></a></li>
          </ul>
         </div>
         <div class="layui-carousel" id="ID-carousel-demo-image">
             <div carousel-item>
                 <a href="#"><div><img src="images/hotelym/1.jpg" style="width: 100%" title="住猫尔顿酒店，给你不一样的体验"></div></a>
                 <a href="#"><div><img src="images/hotelym/2.jpg" style="width: 100%" title="住猫尔顿酒店，给你不一样的体验"></div></a>
                 <a href="#"><div><img src="images/hotelym/3.jpg" style="width: 100%" title="住猫尔顿酒店，给你不一样的体验"></div></a>
                 <a href="#"><div><img src="images/hotelym/4.jpg" style="width: 100%" title="住猫尔顿酒店，给你不一样的体验"></div></a>
                 <a href="#"><div><img src="images/hotelym/5.jpg" style="width: 100%" title="住猫尔顿酒店，给你不一样的体验"></div></a>
                 <a href="#"><div><img src="images/hotelym/6.jpg" style="width: 100%" title="住猫尔顿酒店，给你不一样的体验"></div></a>
                 <a href="#"><div><img src="images/hotelym/7.png" style="width: 100%" title="住猫尔顿酒店，给你不一样的体验"></div></a>
                 <a href="#"><div><img src="images/hotelym/8.jpg" style="width: 100%" title="住猫尔顿酒店，给你不一样的体验"></div></a>
             </div>
         </div>
     </div>
</body>

<script src="//unpkg.com/layui@2.8.8/dist/layui.js"></script>
<script>
    layui.use(function(){
        var carousel = layui.carousel;
        // 渲染 - 图片轮播
        carousel.render({
            elem: '#ID-carousel-demo-image',
            width: '100%',
            height: '690px',
            interval: 3000
        });
    });
</script>
<!-- 会员登入窗口 -->
<script src="//unpkg.com/layui@2.8.6/dist/layui.js"></script>
<script>
    layui.use(function(){
        var $ = layui.$;
        var layer = layui.layer;
        var util = layui.util;
        var form = layui.form;
        // 事件
        util.on('lay-on', {
            'test-page-custom': function(){
                layer.open({
                    type: 1,
                    area: '350px',
                    resize: false,
                    shadeClose: true,
                    title: '会员登录',
                    content: `
           <form id="loginForm">
           <div class="layui-form" lay-filter="filter-test-layer" style="margin: 16px;">
            <div class="demo-login-container">
              <div class="layui-form-item">
                <div class="layui-input-wrap">
                  <div class="layui-input-prefix">
                    <i class="layui-icon layui-icon-username"></i>
                  </div>
                  <input type="text" name="username" value="lisi" lay-verify="required" placeholder="用户名" lay-reqtext="请填写用户名" autocomplete="off" class="layui-input" lay-affix="clear">
                </div>
              </div>
              <div class="layui-form-item">
                <div class="layui-input-wrap">
                  <div class="layui-input-prefix">
                    <i class="layui-icon layui-icon-password"></i>
                  </div>
                  <input type="password" name="password" value="123456" lay-verify="required" placeholder="密 码" lay-reqtext="请填写密码" autocomplete="off" class="layui-input" lay-affix="eye">
                </div>
              </div>
              <div class="layui-form-item">
                <input type="checkbox" name="remember" lay-skin="primary" title="记住密码">
                <a href="#forget" style="float: right; margin-top: 7px;">忘记密码？</a>
              </div>
              <div class="layui-form-item">
                <button class="layui-btn layui-btn-fluid" lay-submit lay-filter="demo-login">登录</button>
              </div>
              <div class="layui-form-item demo-login-other">
                <label><a href="">邮箱登录</a></label>
                <span style="padding: 0 21px 0 6px;">
                  <a href="user/email.html"><i class="layui-icon layui-icon-login-qq" style="color: #3492ed;"></i></a>
                </span>
                或 <a href="user/adduser.html">注册帐号</a></span>
              </div>
            </div>
          </div>
            </form>
        `,
                    success: function(){
                        // 对弹层中的表单进行初始化渲染
                        form.render();
                        // 表单提交事件
                        form.on('submit(demo-login)', function(data){

                            let params = $("#loginForm").serialize();
                            // 此处可执行 Ajax 等操作
                            $.ajax({
                                url: '/user/login',
                                type: 'post',
                                data: params,
                                success: function ( res ) {
                                    console.log(res)

                                    // 登录失败
                                    if (res.code != 200) {
                                        layer.msg(res.message);
                                        return ;
                                    }

                                    // 登录成功
                                    layer.msg(res.message,{icon:6},function(){
                                        location.href = res.data;
                                    }) ;
                                }
                            });

                            return false; // 阻止默认 form 跳转
                        });
                    }
                });
            }
        })
    });
</script>
</html>